<template>
    <div>
        <div class="upload-card">
            <div class="cardId">
                <div class="upload-box">
                    <el-upload
                        :action="'/_api/file/upload'"
                        :file-list="fileListPositive"
                        :limit='1'
                        :data="{type:'idcard'}"
                        :on-change="onChangePositive"
                        :on-success="onSuccessPositive"
                        :on-progress="onProgress"
                        :before-upload="beforeUpload"
                        list-type="picture">
                        <el-image
                            src="../../static/images/cardIdPositive.png"
                            class="uploadimg">
                            <div slot="placeholder" class="image-slot">
                                <i class="el-icon-loading"></i>
                            </div>
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </el-upload>
                    <el-image
                        fit="contain"
                        v-if="positive&&positive.url"
                        :src="'/_api' + positive.url"
                        class="img-box"
                        @load="loadImage()"
                        preview>
                        <div slot="placeholder" class="image-slot">
                            <i class="el-icon-loading"></i>
                        </div>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <span v-if="positive.url" @click="clearImgPositiveM" class="iconClear"><i
                        class="el-icon-error"></i></span>
                </div>
                <div class="upload-box">
                    <el-upload
                        :action="'/_api/file/upload'"
                        :file-list="fileListReverse"
                        :data="{type:'idcard'}"
                        :limit='1'
                        :on-change="onChangeReverse"
                        :on-success="onSuccessReverse"
                        :on-progress="onProgress"
                        :before-upload="beforeUpload"
                        list-type="picture">
                        <el-image
                            src="../../static/images/cardIdReverse.png"
                            class="uploadimg">
                            <div slot="placeholder" class="image-slot">
                                <i class="el-icon-loading"></i>
                            </div>
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </el-upload>
                    <el-image
                        fit="contain"
                        v-if="reverse&&reverse.url"
                        :src="'/_api' + reverse.url"
                        class="img-box"
                        @load="loadImage()"
                        preview>
                        <div slot="placeholder" class="image-slot">
                            <i class="el-icon-loading"></i>
                        </div>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <span v-if="reverse.url" @click="clearImgReverseM" class="iconClear"><i
                        class="el-icon-error"></i></span>
                </div>
                <el-button type="primary" class="submit" @click="submitMethods">提交</el-button>
                <div class="paragraph">请上传清晰、完整的身份证照片，进入医院会有工作人员核查身份信息</div>
            </div>
        </div>
        <com-buttom></com-buttom>
    </div>
</template>

<script>
    import imageConversion from 'image-conversion'
    import comButtom from './buttom'
    import exif from 'exif-js'

    export default {
        props: ['imgList'],
        data() {
            return {
                fileListPositive: [],
                positive: {},
                srcListPositive: [],
                fileListReverse: [],
                reverse: {},
                srcListReverse: []
            }
        },
        computed: {
            comButtom
        },
        mounted() {
            if (this.imgList) {
                this.positive = this.imgList.fileListPositive
                this.reverse = this.imgList.fileListReverse
            }
        },
        updated() {
        },
        methods: {
            submitMethods() {
                if ((this.fileListPositive[0] || this.positive.url) && (this.fileListReverse[0] || this.reverse.url)) {
                    this.$emit('upload', {
                        fileListPositive: this.positive,
                        fileListReverse: this.reverse
                    })
                    this.$method.historyBack()
                } else {
                    this.$vux.toast.text('请上传身份证正反面照片', 'middle')
                }
            },
            onChangePositive(file, fileList) {
                this.fileListPositive = fileList
            },
            onSuccessPositive(response, file, fileList) {
                this.$vux.loading.hide()
                this.positive = response.data
                this.srcListPositive.push('/_api' + response.data.url)
                this.$nextTick(() => {
                    this.$previewRefresh()
                })
            },
            onChangeReverse(file, fileList) {
                this.fileListReverse = fileList
            },
            onSuccessReverse(response, file, fileList) {
                this.$vux.loading.hide()
                this.reverse = response.data
                this.srcListReverse.push('/_api' + response.data.url)
                this.$nextTick(() => {
                    this.$previewRefresh()
                })
            },
            clearImgPositiveM() {
                this.fileListPositive = []
                this.positive = {}
            },
            clearImgReverseM() {
                this.fileListReverse = []
                this.reverse = {}
            },
            onProgress() {
                this.$vux.loading.show()
            },
            loadImage() {
                this.$nextTick(() => {
                    this.$previewRefresh()
                })
            },
            beforeUpload(file) {
                // let _this = this
                return new Promise((resolve, reject) => {
                    let isLt2M = file.size / 1024 / 1024 < 1, // 判定图片大小是否小于1MB
                        width, height,
                        img = new Image(), _URL = window.URL || window.webkitURL
                    if (isLt2M) {
                        resolve(file)
                    }
                    this.getOrientation(file, orientation => {
                        img.onload = function () {
                            if (orientation && orientation === 6 && img.width > img.height) {
                                width = img.height
                                height = img.width
                            } else {
                                width = img.width
                                height = img.height
                            }
                            imageConversion.compressAccurately(file, {
                                size: 100,
                                orientation: orientation === 6 ? 6 : (orientation === 3 ? 3 : (orientation === 8 ? 8 : 1)),
                                width: width,
                                height: height,
                                scale: 0.5
                            }).then(res => {
                                resolve(res)
                            })
                        }
                        img.src = _URL.createObjectURL(file)
                    })

                })
            },
            getOrientation(file, callback) {
                exif.getData(file, function () {
                    let orientation = exif.getTag(this, 'Orientation')
                    return callback(orientation)
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .upload-card {
        height: 100%;
        width: 100%;

        /deep/ .cardId {
            padding: .4rem;

            .upload-box {
                position: relative;
                overflow: hidden;
                height: 60vw;
                max-height: 200px;
                margin-bottom: .4rem;
                border-radius: .2rem;

                > div {
                    width: 100%;
                    height: 100%;
                }

                .el-upload, .uploadimg {
                    width: 100%;
                    height: 100%;
                }

                .img-box {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    width: 100%;
                    height: 100%;
                    background-color: #fff;
                }

                .iconClear {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: .72rem;
                    height: .72rem;
                    line-height: .72rem;
                    text-align: center;

                    i {
                        font-size: .4rem;
                        color: #999;
                    }
                }
            }

            .el-upload-list__item {
                display: none;
            }
        }

        .submit {
            width: 100%;
            margin-top: .4rem;
        }

        .paragraph {
            width: 100%;
            margin-top: .2rem;
            color: #999;
        }
    }
</style>
